<template>
  <!-- class =  animate__infinite 无限动画 -->
  <div
      class="chart-item"
      v-for="(item, index) in chartEditStore.componentList"
      :id="item.id"
      :class="[animationsClass(item.styles.animations)]"
      :key="item.id"
      :style="{
      ...getComponentAttrStyle(item.attr, index),
      ...getTransformStyle(item.styles),
      ...getStatusStyle(item.status),
      ...getPreviewConfigStyle(item.preview),
      ...getBlendModeStyle(item.styles) as any,
      ...getSizeStyle(item.attr)
    }"
  >
    <!-- 分组 -->
    <preview-render-group
        v-if="item.isGroup"
        :groupData="(item as CreateComponentGroupType)"
        :groupIndex="index"
        :themeSetting="themeSetting"
        :themeColor="themeColor"
    ></preview-render-group>

    <!-- 单组件 -->
    <component
        v-else
        :is="item.chartConfig.chartKey"
        :id="item.id"
        :chartConfig="item"
        :themeSetting="themeSetting"
        :themeColor="themeColor"
        :style="{
        ...getSizeStyle(item.attr),
        ...getFilterStyle(item.styles)
      }"
        v-on="useLifeHandler(item)"
    ></component>
  </div>
</template>

<script setup lang="ts">
import {PropType, computed, onMounted, ref} from 'vue'
import {useChartDataPondFetch} from '@/hooks'
import {PreviewRenderGroup} from '../PreviewRenderGroup/index'
import {CreateComponentGroupType} from '@/packages/index.d'
import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
import {
  animationsClass,
  getFilterStyle,
  getTransformStyle,
  getBlendModeStyle,
  colorCustomMerge,
  HasNodeOutParam, HasGlobalOutParam
} from '@/utils'
import {getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle} from '../../utils'
import {useLifeHandler} from '@/hooks'
// @ts-ignore
import {Emitter} from "@/utils/Emitter.js";
import {AppParams} from '@/utils/appParams'
import lodash from "lodash";

// 初始化数据池
const {initDataPond, clearMittDataPondMap} = useChartDataPondFetch()
const chartEditStore = useChartEditStore()

// const props = defineProps({
//   localStorageInfo: {
//     type: Object as PropType<ChartEditStorageType>,
//     required: true
//   }
// })

// 主题色
const themeSetting = computed(() => {
  const chartThemeSetting = chartEditStore.editCanvasConfig.chartThemeSetting
  return chartThemeSetting
})

// 配置项
const themeColor = computed(() => {
  const colorCustomMergeData = colorCustomMerge(chartEditStore.editCanvasConfig.chartCustomThemeColorInfo)
  return colorCustomMergeData[chartEditStore.editCanvasConfig.chartThemeColor]
})

// 组件渲染结束初始化数据池
clearMittDataPondMap()

/**
 * 添加class
 * @param Option
 * @constructor
 */
const AddClass = (Option: any) => {
  for (let componentListElement of chartEditStore.componentList) {
    if (Option.id === componentListElement.id) {
      componentListElement.styles.animations = [...componentListElement.styles.animations, ...Option.className]
      break;
    }
  }
}

/**
 * 移除class
 * @param Option
 * @constructor
 */
const RemoveClass = (Option: any) => {
  for (let componentListElement of chartEditStore.componentList) {
    if (Option.id === componentListElement.id) {
      componentListElement.styles.animations = componentListElement.styles.animations.filter(c => !Option.className.includes(c))
      break;
    }
  }
}

/**
 * 父组件
 *
 *  子组件属性更新入口
 *
 * 1，节点完成时被触发
 * 2，监听全局变量更新了
 * @param Node
 * @constructor
 */
const NodeComplete = (Node: any) => {
  Complete(Node);
}
const GlobalComplete = (Node: any) => {
  Node.DataSource = AppParams.DATA_SOURCE_TYPE.GLOBAL_PARAM;
  Complete(Node);
}
const Complete = (Node: any) => {
  for (let chartConfig of chartEditStore.componentList) {
    let Updates = null;
    if (Node.DataSource === AppParams.DATA_SOURCE_TYPE.GLOBAL_PARAM) {
      Updates = HasGlobalOutParam(chartConfig, Node);
    } else {
      Updates = HasNodeOutParam(chartConfig, Node);
    }

    for (let update of Updates) {
      lodash.set(chartConfig.option, update.param, update.val)
    }
  }
}
onMounted(() => {
  initDataPond(useChartEditStore)
  Emitter.on(AppParams.JAVA_SCRIPT_EVENT.UI_ADD_ELEMENT_CLASS, AddClass)
  Emitter.on(AppParams.JAVA_SCRIPT_EVENT.UI_REMOVE_ELEMENT_CLASS, RemoveClass)
  Emitter.on(AppParams.JAVA_SCRIPT_EVENT.NODE_COMPLETE, NodeComplete);
  Emitter.on(AppParams.JAVA_SCRIPT_EVENT.GLOBAL_PARAM_DATA_UPDATE, GlobalComplete);
})
</script>

<!--<style>-->
<!--:root {-->
<!--  &#45;&#45;animate-duration: 3s;-->
<!--}-->
<!--</style>-->
<style lang="scss" scoped>
.chart-item {
  position: absolute;
}
</style>
